import http from '../../../../../utils/http';
import '../../../../heathManege/ScoreManagement/components/ModalseeS2/ModalseeS2.css'
import React, { useState } from 'react';
import { Modal, Button } from 'antd'
import {
    Form,
    Input,
    Radio,
} from 'antd';
const ModaleditE = (props) => {
    // console.log('z',props.content.Question_id);
    let statusvalue = props.content.State
    
    // console.log(statusvalue);
    const onChange = e => {
        console.log(e);
    };
    // 添加
    const [isModalVisible4, setIsModalVisible4] = useState(false);

    const showModal4 = () => {
        setIsModalVisible4(true);
    };



    const [Question_name, setQuestion_name] = useState()
    const onChange_Question_name = e => {
        console.log(e.target.value);
        setQuestion_name(e.target.value)
    }

    const [answer1, setanswer1] = useState()
    const onChange_answer1 = e => {
        console.log(e.target.value);
        setanswer1(e.target.value)
    }

    const [answer2, setanswer2] = useState()
    const onChange_answer2 = e => {
        console.log(e.target.value);
        setanswer2(e.target.value)
    }

    const [State, setState] = useState(1)
    function editState(value) {
        console.log(`状态 `, value.target.value);
        setState(value.target.value)
    }

    const handleOk4 = () => {
        setIsModalVisible4(false);
        http({
            url: '/configuration/edit',
            method: 'post',
            data: {
                Question_name: Question_name||props.content.Question_name,
                answer1: answer1||props.content.answer1,
                answer2: answer2||props.content.answer2,
                State: State||statusvalue,
                Question_id:props.content.Question_id
            }
        }).then((res) => {
            if (res) {
                props.fn();
            }
        })
    };

    const handleCancel4 = () => {
        setIsModalVisible4(false);
    };
    // 模态框title
    const CustomTitle4 = () => {
        return (
            <div className='CustomTitle_title'>
                编辑
            </div>
        )
    }
    return (
        <div>
            {/* 添加 */}
            <a onClick={showModal4}>编辑</a>
            <Modal cancelText='返回' okText='确认' width="715px" title={<CustomTitle4 ></CustomTitle4>} visible={isModalVisible4} onOk={handleOk4} onCancel={handleCancel4} footer={[
                <Button id="ModalseeS3Btn1" key="back" onClick={handleCancel4}>返回</Button>,
                <Button id="ModalseeS3Btn2" key="submit" type="primary" onClick={handleOk4}>
                    确认
                </Button>,
            ]}>
                <div className="ModalseeC2">
                    <Form className="comment">
                        <p>问题名称:</p>
                        <Form.Item>
                            <Input defaultValue={props.content.Question_name}
                                placeholder="请输入问题名称" 
                                onChange={onChange_Question_name} />
                        </Form.Item>
                        <p>答案一：</p>
                        <Form.Item>
                            <Input
                                placeholder="请输入答案"
                                defaultValue={props.content.answer1}
                                onChange={onChange_answer1} />
                        </Form.Item>
                        <p>答案二：</p>
                        <Form.Item>
                            <Input
                                placeholder="请输入答案" 
                                defaultValue={props.content.answer2}
                                onChange={onChange_answer2} />
                        </Form.Item>
                        <p className="status">状态:</p>
                        <Form.Item >
                            <Radio.Group onChange={editState} name="radiogroup" defaultValue={statusvalue}>
                                <Radio
                                    value={1}
                                >启用</Radio>
                                <Radio value={0}>禁用</Radio>
                            </Radio.Group>
                        </Form.Item>
                    </Form>
                </div>
            </Modal>
        </div>
    );
};
export default ModaleditE;